<template>
    <div>


        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                prop="baseInfomation"
                label="基本信息"
                width="180">
            </el-table-column>
            <el-table-column
                prop="healthState"
                label="健康状态"
                width="180">
                <template slot-scope="scope">
                  <span v-if="scope.row.healthState == 1">健康</span>
                  <span v-if="scope.row.healthState == 2">良好</span>
                  <span v-if="scope.row.healthState == 3">严重</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="overheadSql"
                label="高开销SQL分析">
            </el-table-column>


            <el-table-column
                prop="databaseLog"
                label="数据库日志分析">
            </el-table-column>
            <el-table-column
                prop="changeLog"
                label="日志切换分析">
            </el-table-column>
        </el-table>





    </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryStateReport} from "@/api/diagmanage/stateReport"
export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
        getList(){
          let data = {}
            queryStateReport(data).then(res=>{
                this.tableData=res.data

            })
        }


    },
    data() {
      return {
        tableData: []
      }
    },
    created(){
        this.getList()
    }






}
</script>

<style scoped>

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
